<%- include('./includes/head.ejs') %>
<link rel="stylesheet" href="/css/index.css">
</head>

<body>

  <%- include('./includes/navigation.ejs') %>

  <main>
    <div class="section">
      <div class="section-title">
        <h3>博客搜索</h3>
      </div>
      <div class="search-wrap">
        <form action="">
          <input class="search-input" type="text" placeholder="请输入关键字并按回车" />
          <button class="submit" type="submit">搜索</button>
        </form>
      </div>
    </div>

    <div class="section">
      <div class="section-title">
        <h3>学习路径</h3>
      </div>
    </div>

    <div class="section">
      <div class="section-title">
        <h3>作品链接</h3>
      </div>
      <div class="frindly-link-wrap">
        <div class="card-list clearfix">
          <% for(let card of cards) { %>
            <div class="card">
              <a href="<%= card.projectUrl %>" target="_blank">
                <div class="card-image">
                  <img src="<%= card.imgUrl %>" alt="<%= card.title %>" />
                </div>
                <div class="card-info">
                  <div class="card-title"><%= card.title %></div>
                  <div class="card-description"><%= card.description %></div>
                </div>
                <div class="mask"></div>
              </a>
            </div>
            <% } %>
        </div>
      </div>
    </div>

  </main>

  <%- include('./includes/end.ejs') %>